<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../js/font/iconfont.css">
    <link rel="stylesheet" href="../js/fonts/iconfont.css">
    <link rel="stylesheet" href="../js/swiper/swiper-3.4.2.min.css">
    <script src="../js/swiper/swiper-3.4.2.min.js"></script>
</head>
<body>
<header>
    <div class="header_title">
        <img src="../img/shop_03.png" alt="" id="fh">
    </div>
</header>

<section class="box">
    <a name="top">
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../img/ju_11.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/ju_11.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../img/ju_11.jpg" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </a>

    <div class="nav">
        <ul class="clearfix">
            <li>
                <img src="../img/ju_17.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_19.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_21.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_23.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_32.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_33.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_34.png" alt="">
                <p>商品</p>
            </li>
            <li>
                <img src="../img/ju_36.png" alt="">
                <p>商品</p>
            </li>
        </ul>
    </div>

    <div class="shop">
        <div class="shop_title clearfix">
            <span>聚划算热排行</span>
            <span>TOP10</span>
        </div>
        <div class="shop_body">
            <ul>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num">1</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FF4900">2</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FF4900">3</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FF7300">4</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FF9C00">5</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FFA800">6</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FFB400">6</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FCCF00">8</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background: #FED718">9</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
                <li class="clearfix">
                    <div class="shop_body_left">
                        <p class="num" style="background:#FFE152  ">10</p>
                        <img src="../img/ju_42.png" alt="">
                        <div class="shop_li_title">
                            <p>已售68423</p>
                            <span><b>2.3</b>折</span>
                            <span>￥<del>299</del></span>
                        </div>
                        <span class="money">$51 <i class="iconfont icon-tiaozhuan-copy fan"></i></span>

                    </div>
                </li>
            </ul>
        </div>


        <div class="more">
            更多划算 逛起来!
        </div>
        <div class="live clearfix">
            <div class="live_left">
                <p>商品团</p>
            </div>
            <div class="live_right">
                <ul class="clearfix">
                    <li>服装</li>
                    <li>配饰</li>
                    <li>美妆</li>
                    <li>鞋包</li>
                    <li>食品</li>
                    <li>家居</li>
                    <li>运动</li>
                    <li>电器</li>
                    <li>百货</li>
                    <li>母婴</li>
                    <li>数码</li>
                    <li>更多</li>
                </ul>
            </div>
        </div>


        <div class="more">
            更多划算 逛起来!
        </div>
        <div class="live clearfix">
            <div class="live_left">
                <p>生活团</p>
            </div>
            <div class="live_right">
                <ul class="clearfix">
                    <li>服装</li>
                    <li>配饰</li>
                    <li>美妆</li>
                    <li>鞋包</li>
                    <li>食品</li>
                    <li>家居</li>
                    <li>运动</li>
                    <li>电器</li>
                    <li>百货</li>
                    <li>母婴</li>
                    <li>数码</li>
                    <li>更多</li>
                </ul>
            </div>
        </div>


        <div class="more">
            更多划算 逛起来!
        </div>
        <div class="live clearfix">
            <div class="live_left">
                <p>品牌团</p>
            </div>
            <div class="live_right">
                <ul class="clearfix">
                    <li>服装</li>
                    <li>配饰</li>
                    <li>美妆</li>
                    <li>鞋包</li>
                    <li>食品</li>
                    <li>家居</li>
                    <li>运动</li>
                    <li>电器</li>
                    <li>百货</li>
                    <li>母婴</li>
                    <li>数码</li>
                    <li>更多</li>
                </ul>
            </div>
        </div>

        <div class="more">
            品牌折扣 逛起来!
        </div>
        <div class="clearfix iphone">
            <ul>
                <li>
                    <img src="../img/iphone_03.png" alt="">
                    <p>IOS客户端</p>
                </li>
                <li>
                    <img src="../img/iphone_05.png" alt="">
                    <p>安卓客户端</p>
                </li>
                <li>
                    <img src="../img/iphone_07.png" alt="">
                    <p>反馈意见</p>
                </li>
            </ul>
        </div>

    </div>

    <ul class="login clearfix">
        <li>登录</li>
        <li>注册</li>
        <li><a href="#top">TOP <i class="iconfont icon-dingbuxiala top"></i></a></li>
    </ul>
    <div class="footer">
        <p><span>标准版</span><span>电脑版</span></p>
        <p>2013浙B2-20080224 服务中心</p>
    </div>
</section>


<!--
<footer></footer>-->
</body>
</html>
<script>
    window.addEventListener('orientationchange', setRem);
    window.addEventListener('resize', setRem);
    setRem();
    function setRem() {
        var html = document.querySelector('html');
        var width = html.getBoundingClientRect().width;
        html.style.fontSize = width / 15 + 'px';
    };

    var mySwiper = new Swiper('.swiper-container', {
//        direction: 'vertical',
        loop: true,
        autoplay: 2000,


        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
//        nextButton: '.swiper-button-next',
//        prevButton: '.swiper-button-prev',

        // 如果需要滚动条
//        scrollbar: '.swiper-scrollbar',
    })
</script>